<template>
	<view class="content">
		<view class="newbg">
			<image class="js" src="../../static/pages_my/jsbg.png" mode=""></image>
			<view class="input-box" style="margin: 720rpx auto 0;">
				<input type="text" placeholder="请输入姓名" v-model="name" placeholder-class="ppp">
			</view>
			<view class="input-box flex" style="margin: 30rpx auto;">
				<text>性别</text>
				<view class="flex">
					<view class="Nan flex">
						<view v-if="nans==1" @click="nans=0" class="circless"></view>
						<image v-if="nans==0" src="/static/pages_my/sex.png" mode=""></image>
						<text class="u-m-l-10">男</text>
					</view>
					<view class="Nan flex u-m-l-50">
						<view v-if="nans==0" @click="nans=1" class="circless"></view>
						<image v-if="nans==1" src="/static/pages_my/sex.png" mode=""></image>
						<text class="u-m-l-10">女</text>
					</view>
				</view>
			</view>
			<view class="input-box" style="margin: 30rpx auto;">
				<input type="tel" placeholder="请输入手机号" v-model="mobile" placeholder-class="ppp">
			</view>
			<view class="input-box flex" style="margin: 30rpx auto;">
				<input type="number" placeholder="请输入验证码" v-model="code" placeholder-class="ppp">
				<view class="code" style="min-width: 300rpx; text-align: right;" @click="getCode">{{word}}</view>
			</view>
			<view class="input-box" style="margin: 30rpx auto;">
				<input type="number" placeholder="请输入年龄" v-model="age" placeholder-class="ppp">
			</view>
			<view class="input-box flex" @click="show=true">
				<text>意向合作城市</text>
				<view class="flex" style="align-items: center;">
					<text>{{city}}</text>
					<u-icon name='arrow-right' color='#00CE9B'></u-icon>
				</view>
			</view>

			<view class="uppic_box flex">
				<u-upload :fileList="fileList1" style="" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="1">
					<image src="../../static/pages_my/upl.png" style="width: 200rpx; height: 200rpx;" mode=""></image>
				</u-upload>
				<view class="flex" style="justify-content: space-around; flex-direction: column; height: 150rpx; margin-right: 30rpx;">
					<text>请上传本人近期照片</text>
					<text>图片不得超过2M</text>
				</view>
			</view>

		</view>
		<view class="flex-cneter sub u-m-t-50" @click="apply">
			<view class="mybtn">
				申请
			</view>
		</view>

		<!-- <u-picker :show="show" ref="uPicker" @change="changeHandler" :columns="cityList"  @confirm="confirm" @cancel='show=false'></u-picker> -->
		<address-picker :show="show" mytype=2 closeOnClickOverlay v-if="citydatas" :citydata="citydatas"
			@confirm='confirmAddress' @cancel='show=false' @close='addressShow = false'></address-picker>
	</view>
</template>

<script>
	import cityData from '../../common/city.js'
	export default {
		data() {
			return {
				citydatas: uni.getStorageSync('citydata1') || [],
				mobile: "",
				nans: 0,
				age: '',
				code:'',
				city: '选择城市',
				
				fileList1: [],
				name: '',
				cityList: [],
				cityLevel1: [],
				cityLevel2: [],
				cityLevel3: [],
				show: false,
				show1: false,
				finish: true,
				word: '获取验证码',
			};
		},
		watch:{
			nans(news,old){
				
			}
		},
		onLoad() {
			this.initCityData()
			
		},
		methods: {
			
			initCityData() {
				// 遍历城市js
				cityData.forEach((item1, index1) => {
					let temp2 = [];
					this.cityLevel1.push(item1.provinceName);
			
					let temp4 = [];
					let temp3 = [];
					// 遍历市
					item1.cities.forEach((item2, index2) => {
						temp2.push(item2.cityName);
						// 遍历区
						item2.counties.forEach((item3, index3) => {
							temp3.push(item3.countyName);
						})
						temp4[index2] = temp3;
						temp3 = [];
					})
					this.cityLevel3[index1] = temp4;
			
					this.cityLevel2[index1] = temp2;
				})
				// 选择器默认城市
				this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
			},
			// 选中时执行
			changeHandler(e) {
				const {
					columnIndex,
					index,
					indexs,
					value,
					values,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) { // 选择第一列数据时
					// 设置第二列关联数据
					picker.setColumnValues(1, this.cityLevel2[index]);
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
				} else if (columnIndex === 1) { // 选择第二列数据时
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
				}
			},
			// 单击确认按钮时执行
			confirm(e) {
				// 输出数组 [省, 市, 区]
				
				if(e.value[1]=='市辖区'){
					this.city = e.value[0]
				}else{
					this.city = e.value[1]
				}
				// 隐藏城市选择器
				this.show = false;
			},
			confirmAddress(e){
				console.log(e);
				this.city = e.value[1]
				this.show = false;
			},
			// 获取验证码
			getCode() {
				if (this.finish) {
					
					if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
						uni.$u.toast('请输入正确的手机号');
						return;
					}					
					this.$api.post('/sms', {
						event: 'recruit',
						mobile: this.mobile,
					}).then(res => {
						if (res.code == 1) {
							uni.$u.toast('已发送');
							this.finish = false
							this.num = 60
							this.word = `${this.num}秒后重新发送`
							this.change()
						}
					}).catch((res) => {
			
					})
			
				} else {
					uni.$u.toast('请稍后重试');
				}
			
			},
			change() {
				setTimeout(() => {
					this.num--;
					if (this.num === 0) {
						this.finish = true
						this.word = '获取验证码'
					} else {
						this.word = `${this.num}秒后重新发送`
						this.change()
					}
				}, 1000)
			},
			// 申请代理
			apply() {
				if(this.name === ''){
					this.$toast('请输入姓名');
					return
				}
				if(!uni.$u.test.mobile(this.mobile)){
					this.$toast('请输入正确的手机号');
					return
				}
				if(this.code === ''){
					this.$toast('请输入手机号验证码');
					return
				}
				if(this.city === ''){
					this.$toast('请选择意向城市');
					return
				}
				if(this.fileList1.length === 0){
					this.$toast('请上传近期照片');
					return
				}
				this.image = this.fileList1[0].ful
				this.$api.post('/skillrecruit', {
					name: this.name,
					mobile: this.mobile,
					code: this.code,
					age: this.age,
					city: this.city,
					sex: this.nans,
					image: this.image
				}).then(res => {
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						setTimeout(()=>{
							this.$back();
						},1000)
					}
				}).catch((res) => {
			
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				let that = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: that.$uploadUrl,  // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							type: 'image',
							token: uni.getStorageSync('token')
						},
						success: (res) => {
									
							let data = JSON.parse(res.data)
									
							if (res.statusCode === 200 && data.code === 1 && data.data) {
								resolve(
									data.data.url
								)
									
							} else {
								resolve()
							}
									
						}
					});
				})
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		position: relative;
		background-color: #68FFB8;
		padding-bottom: 100rpx;
		height: calc(100vh - var(--window-bottom) - var(--window-top));
		padding-top: var(--status-bar-height);
	}
	.content{
		padding-bottom: 100rpx;
	}
	.newbg {
		width: 90vw;
		margin: 0 auto;
		background-color: #68FFB8;
		box-sizing: border-box;
		position: relative;
		overflow: auto;
		.js{
			width: 90vw;
			height: 100%;
			position: absolute;
			z-index: 1;
		}
		.uppic_box {
			position: relative;
			z-index: 999;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #00CE9B;
			border:10rpx solid  #00CE9B;
			width: 80%;
			border-radius: 20rpx;
			height: 190rpx;
			margin: 30rpx auto;
		}

		.input-box {
			z-index: 999;
			position: relative;
			margin: 30rpx auto;
			justify-content: space-between;
			width: 75%;
			padding: 30rpx;
			border-radius: 30rpx;
			border: 2rpx solid #00CE9B;
			color: #00CE9B;

			.ppp {
				color: #00CE9B;
			}

			.Nan {
				align-items: center;

				>image {
					width: 33rpx;
					height: 33rpx;
				}

				.circless {
					width: 30rpx;
					height: 30rpx;
					border: 3rpx solid #68FFB7;
					border-radius: 50%;
				}
			}
		}
	}

	.sub {
		image {
			width: 90vw;
			height: 110rpx;
		}
	margin-bottom: 50rpx;
	}
</style>